<template>
  <div class="todo-filters">
    <button 
      @click="setFilter('all')" 
      :class="{ active: currentFilter === 'all' }"
    >全部</button>
    <button 
      @click="setFilter('active')" 
      :class="{ active: currentFilter === 'active' }"
    >未完成</button>
    <button 
      @click="setFilter('completed')" 
      :class="{ active: currentFilter === 'completed' }"
    >已完成</button>
  </div>
</template>

<script setup>
const props = defineProps({
  currentFilter: {
    type: String,
    default: 'all'
  }
})

const emit = defineEmits(['update:filter'])

function setFilter(filter) {
  emit('update:filter', filter)
}
</script>

<style scoped>
.todo-filters {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.todo-filters button {
  background: #f5f5f5;
  border: 1px solid #ddd;
  padding: 8px 15px;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.todo-filters button:hover {
  background: #eee;
}

.todo-filters button.active {
  background: #42b983;
  color: white;
  border-color: #42b983;
  font-weight: bold;
}
</style> 